<template>
  <h1>销售统计</h1>
  <el-row>
    <el-col :span="12">
      <div id="typeChart" style="width: 400px;height: 400px"></div>
    </el-col>
    <el-col :span="12">
      <div id="goodsChart" style="width: 400px;height: 400px"></div>
    </el-col>
  </el-row>


  <div>
    <span>起始日期</span>
    <el-date-picker v-model="startDate" type="date" value-format="YYYY-MM-DD"
                    placeholder="请选择起始日期">
    </el-date-picker>
    <span>结束日期</span>
    <el-date-picker v-model="endDate" type="date" value-format="YYYY-MM-DD"
                    placeholder="请选择结束日期">
    </el-date-picker>
    <el-button type="primary" @click="find">查询</el-button>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from 'echarts'

export default {
  mounted() {
    this.find();
  },
  name: "SaleStats",
  data() {
    return {
      startDate: '',
      endDate: '',
      typeList: [],
      goodsList: []
    }
  },
  methods: {
    find: async function () {
      let param = new URLSearchParams();
      param.append("startDate", this.startDate);
      param.append("endDate", this.endDate);
      await axios.post("/api/saleInfo/findTypeTotal", param).then(response => {
        this.typeList = response.data;
        axios.post("/api/saleInfo/findNameTotal", param).then(response => {
          this.goodsList = response.data;
          this.getCharts()
        })
      })
    },
    getCharts() {
      let typeChart = echarts.init(document.getElementById("typeChart"));
      let goodsChart = echarts.init(document.getElementById("goodsChart"));
      // 绘制图表
      typeChart.setOption({
        title: {
          text :'销售类别统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.typeList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
      goodsChart.setOption({
        title: {
          text :'销售产品统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.goodsList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
      window.onresize = function () {//自适应大小
        typeChart.resize();
        goodsChart.resize();
      };
    }
  }

}
</script>

<style scoped>

</style>